import React,{Component} from 'react';
import { 
    StyleSheet,
    View, 
    Image,
    Text, 
    StatusBar,
    TouchableWithoutFeedback
} from 'react-native';

export default class Header extends Component {
    render() {
        return (
            <View style={[styles.nav,{backgroundColor: this.props.bgColor?this.props.bgColor:'#fff'},{borderBottomWidth: this.props.border?0:1}]}>
                {
                    this.props.isShowBack?
                    <TouchableWithoutFeedback onPress={()=>this.props.goBack()}>
                        <View style={styles.navTop}>
                            <Image style={styles.navTopImg} source={require('../../images/backBtn.png')}/>
                            <Text style={styles.navTopText}>返回</Text>
                        </View>
                    </TouchableWithoutFeedback>
                    :
                    null
                }
                <View style={styles.navCenter}>
                    <Text style={[styles.navCenterText,{color: this.props.color?this.props.color:'#000'}]}>{this.props.title}</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    nav: {height: 44, backgroundColor: '#fff', flexDirection: 'row',justifyContent: 'space-between',alignItems: 'center',borderBottomWidth: 1,borderColor: '#eeeeee'},
    navTop: {position: 'absolute', left: 15, top: 4, paddingRight: 10,paddingTop: 8,paddingBottom: 8,flexDirection: 'row'},
    navTopImg: {width: 10,height: 20,marginRight: 5,},
    navTopText: {color: "#000000", fontSize: 14},
    navCenter: {flex: 1, justifyContent: 'center', alignItems: 'center'},
    navCenterText: {color: "#000000", fontSize: 15,textAlign: 'center'},
    navBottom: {paddingRight: 10,paddingTop: 8,paddingBottom: 8,flexDirection: 'row',opacity: 0},
    navBottomImg: {width: 10,height: 20,marginRight: 5},
    navBottomText: {color: "#000000", fontSize: 15}
});